<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>登录 - 管道巡检App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        .ios-statusbar {
            height: 44px;
            background: linear-gradient(135deg, #000 0%, #333 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-600 via-blue-500 to-purple-600 h-screen overflow-hidden">
    <!-- iOS状态栏 -->
    <div class="ios-statusbar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <div class="w-6 h-3 border border-white rounded-sm">
                <div class="w-4 h-1.5 bg-white rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 主内容 -->
    <div class="flex flex-col h-full pt-16 pb-8 px-6">
        <!-- Logo区域 -->
        <div class="text-center mb-12">
            <div class="mx-auto w-20 h-20 bg-white rounded-full flex items-center justify-center mb-6 shadow-2xl">
                <i class="fas fa-industry text-blue-600 text-3xl"></i>
            </div>
            <h1 class="text-white text-2xl font-bold mb-2">管道巡检</h1>
            <p class="text-blue-100 text-sm">Pipeline Inspection</p>
        </div>

        <!-- 登录表单 -->
        <div class="flex-1">
            <div class="bg-white rounded-2xl p-6 shadow-2xl">
                <div class="space-y-6">
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">
                            <i class="fas fa-user mr-2 text-blue-500"></i>用户名
                        </label>
                        <input type="text" placeholder="请输入用户名" 
                               class="w-full px-4 py-4 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition">
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">
                            <i class="fas fa-lock mr-2 text-blue-500"></i>密码
                        </label>
                        <input type="password" placeholder="请输入密码" 
                               class="w-full px-4 py-4 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition">
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">
                            <i class="fas fa-user-tag mr-2 text-blue-500"></i>身份
                        </label>
                        <select class="w-full px-4 py-4 bg-gray-50 border-0 rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition">
                            <option>选择您的身份</option>
                            <option>安全巡检员</option>
                            <option>安全维护员</option>
                        </select>
                    </div>

                    <div class="flex items-center justify-between">
                        <label class="flex items-center">
                            <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-600">记住登录</span>
                        </label>
                        <a href="#" class="text-sm text-blue-600">忘记密码？</a>
                    </div>

                    <button type="button" 
                            class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 rounded-xl font-medium shadow-lg hover:shadow-xl transform hover:scale-105 transition">
                        <i class="fas fa-sign-in-alt mr-2"></i>立即登录
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="text-center mt-8">
            <p class="text-blue-100 text-xs">v1.0.0 • 工业管道安全巡检系统</p>
            <p class="text-blue-200 text-xs mt-1">© 2025 All Rights Reserved</p>
        </div>
    </div>

    <!-- 安全提示浮层 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-2xl transform translate-y-full transition-transform" id="securityTip">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-shield-alt text-green-600"></i>
            </div>
            <div class="flex-1">
                <p class="text-sm font-medium text-gray-800">安全提醒</p>
                <p class="text-xs text-gray-600">请确保在安全环境下使用此应用</p>
            </div>
            <button onclick="hideTip()" class="text-gray-400">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <script>
        // 显示安全提示
        setTimeout(() => {
            document.getElementById('securityTip').style.transform = 'translateY(0)';
        }, 2000);

        function hideTip() {
            document.getElementById('securityTip').style.transform = 'translateY(100%)';
        }

        // 自动隐藏提示
        setTimeout(hideTip, 8000);
    </script>
</body>
</html>